Feature · design-handoff
Design handoff
Take an agent's prototype into Figma or Paper to refine it, then bring the design back into the project as Canvas templates and Canopy blocks through MCP.
Prototype to frames
conceptonce one pass, holds
Concept on a midnight ground: the Weka prototype on localhost beside a design tool drawn generic (no brand chrome; the ground names Figma and Paper). The file opens with an empty frame, then each section of the prototype is lifted as a selection box and carried across, landing in the frame as a layer while its row appears in the layers panel. Last the hero is selected with its handles, its 1440 × 720 size and its properties. The frame is the prototype's own markup at 0.7. At card width the frame holds the design tool.
views/components/visuals/design-handoff/k1.html
Static · three placements
Via MCP
HTML to
frames
The prototype
Into Figma or Paper
Spring range
Shop nowNew this season
Ask us anything
Spring landing
Nav
Hero
Products
Enquiry
Frame
Fill
FFFFFF
Auto layout
Gap 24
Spring landing
Spring range
Shop nowNew this season
Ask us anything
Via MCP
HTML to
frames
The prototype
Into Figma or Paper
Spring range
Shop nowNew this season
Ask us anything
Spring landing
Nav
Hero
Products
Enquiry
Frame
Fill
FFFFFF
Auto layout
Gap 24
Spring landing
Spring range
Shop nowNew this season
Ask us anything
Via MCP
HTML to
frames
The prototype
Into Figma or Paper
Spring range
Shop nowNew this season
Ask us anything
Spring landing
Nav
Hero
Products
Enquiry
Frame
Fill
FFFFFF
Auto layout
Gap 24
Spring landing
Spring range
Shop nowNew this season
Ask us anything
Animated · once
Via MCP
HTML to
frames
The prototype
Into Figma or Paper
Spring range
Shop nowNew this season
Ask us anything
Spring landing
Nav
Hero
Products
Enquiry
Frame
Fill
FFFFFF
Auto layout
Gap 24
Spring landing
Spring range
Shop nowNew this season
Ask us anything
Overrides none — the file's own defaults
Frames to Canvas
conceptonce one pass, holds
Concept on a navy ground: the Spring landing frame on a design canvas, an agent between two MCP servers (Figma or Paper to read, Blutui with the canopy blocks skill to write) and a code editor on the Weka project. The frame and its layers are picked out and wired through the agent into the file tree, where landing.html and three Canopy blocks land with an added marker, then hero.canvas opens and types itself in: config, settings, template. At card width the editor and the wires feeding it fill the frame.
views/components/visuals/design-handoff/k2.html
Static · three placements
From Figma or Paper
Into Blutui Canvas
Spring landing
Spring range
Shop nowNew this season
Ask us anything
Figma or Paperreads
Blutuiwrites
blutui-canopy-blocks
views
layouts
landing.htmlA
canopy
hero.canvasA
products.canvasA
enquiry.canvasA
{% canopy config %} { "title": "Hero", "name": "hero", "settings": [ { "name": "heading", "type": "text" }, { "name": "image", "type": "file" } ] } {% endcanopy %} {% canopy template %} {% set image = settings.image %} <section class="hero"> <h1>{{ settings.heading }}</h1> <img src="{{ image.path }}"> </section> {% endcanopy %}
From Figma or Paper
Into Blutui Canvas
Spring landing
Spring range
Shop nowNew this season
Ask us anything
Figma or Paperreads
Blutuiwrites
blutui-canopy-blocks
views
layouts
landing.htmlA
canopy
hero.canvasA
products.canvasA
enquiry.canvasA
{% canopy config %} { "title": "Hero", "name": "hero", "settings": [ { "name": "heading", "type": "text" }, { "name": "image", "type": "file" } ] } {% endcanopy %} {% canopy template %} {% set image = settings.image %} <section class="hero"> <h1>{{ settings.heading }}</h1> <img src="{{ image.path }}"> </section> {% endcanopy %}
From Figma or Paper
Into Blutui Canvas
Spring landing
Spring range
Shop nowNew this season
Ask us anything
Figma or Paperreads
Blutuiwrites
blutui-canopy-blocks
views
layouts
landing.htmlA
canopy
hero.canvasA
products.canvasA
enquiry.canvasA
{% canopy config %} { "title": "Hero", "name": "hero", "settings": [ { "name": "heading", "type": "text" }, { "name": "image", "type": "file" } ] } {% endcanopy %} {% canopy template %} {% set image = settings.image %} <section class="hero"> <h1>{{ settings.heading }}</h1> <img src="{{ image.path }}"> </section> {% endcanopy %}
Animated · once
From Figma or Paper
Into Blutui Canvas
Spring landing
Spring range
Shop nowNew this season
Ask us anything
Figma or Paperreads
Blutuiwrites
blutui-canopy-blocks
views
layouts
landing.htmlA
canopy
hero.canvasA
products.canvasA
enquiry.canvasA
{% canopy config %} { "title": "Hero", "name": "hero", "settings": [ { "name": "heading", "type": "text" }, { "name": "image", "type": "file" } ] } {% endcanopy %} {% canopy template %} {% set image = settings.image %} <section class="hero"> <h1>{{ settings.heading }}</h1> <img src="{{ image.path }}"> </section> {% endcanopy %}
Overrides none — the file's own defaults